<template>
  <template
    v-for="(item, index) in fieldList"
    :key="`${index}${item.field || '-'}`"
  >
    <template v-if="item.select">
      <FormCombined
        v-if="getShow(item)"
        :selectStyle="item.selectStyle || 'width: 200px'"
        :options="item.select"
        :modelValue="formData[item.field]"
        @update:modelValue="handleCombined(item, $event)"
      >
        <template #default="{ value, input }">
          <template v-if="item.type == 'input'">
            <el-input
              :modelValue="value"
              @input="input"
              :style="item?.style || 'width: 200px'"
              :placeholder="item.placeholder || `请输入`"
              v-bind="item.itemProps"
              clearable
            >
              <template #prefix v-if="item.prefix">
                <slot :name="item.prefix"></slot>
              </template>
              <template #append v-if="item.append && slots[item.append]">
                <slot :name="item.append"></slot>
              </template>
              <template #append v-if="item.append && !slots[item.append]">
                {{ item.append }}
              </template>
            </el-input>
          </template>
          <template v-else-if="item.type == 'select'">
            <el-select
              :style="item?.style || 'width: 200px'"
              :class="item.class"
              :modelValue="value"
              @update:modelValue="input"
              :popper-append-to-body="false"
              :placeholder="item.options?.placeholder || '请选择'"
              :multiple="item?.multiple"
              :collapse-tags="item?.multiple"
              :collapse-tags-tooltip="item?.multiple"
              v-bind="item.itemProps"
              filterable
              clearable
            >
              <el-option
                label="全选"
                value="all"
                v-if="item?.multiple"
                @click.native="selectAll(item)"
              ></el-option>
              <el-option
                v-for="s in optionsDataAll[
                  item?.originOption || item.originField || item.field
                ]"
                :key="s[item?.options?.valueKey || 'value']"
                :label="s[item.options?.labelKey || 'label']"
                :value="s[item?.options?.valueKey || 'value']"
              />
            </el-select>
          </template>
          <template v-else-if="item.type == 'dateTimeRange'">
            <div :style="item.style">
              <el-date-picker
                :modelValue="value"
                :style="item.style"
                type="datetimerange"
                :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
                :valueFormat="item.format || 'YYYY-MM-DD HH:mm:ss'"
                :shortcuts="item.options?.shortcuts"
                :placeholder="item.options?.placeholder"
                @update:modelValue="input"
                :default-time="[
                  new Date(2000, 1, 1, 0, 0, 0),
                  new Date(2000, 2, 1, 23, 59, 59),
                ]"
                v-bind="item.itemProps"
                clearable
              />
            </div>
          </template>
          <template v-else>
            <slot :name="item.slot" :value="value" :input="input"> </slot>
          </template>
        </template>
      </FormCombined>
    </template>
    <template v-else>
      <template v-if="item.type == 'input'">
        <el-input
          v-if="getShow(item)"
          v-model="formData[item.field]"
          :style="item?.style || 'width: 200px'"
          :placeholder="item.placeholder || `请输入`"
          v-bind="item.itemProps"
          clearable
        >
          <template #prefix v-if="item.prefix">
            <slot :name="item.prefix"></slot>
          </template>
          <template #append v-if="item.append && slots[item.append]">
            <slot :name="item.append"></slot>
          </template>
          <template #append v-if="item.append && !slots[item.append]">
            {{ item.append }}
          </template>
        </el-input>
      </template>
      <template v-else-if="item.type == 'select'">
        <el-select
          v-if="getShow(item)"
          :style="item?.style || 'width: 200px'"
          :class="item.class"
          v-model="formData[item.field]"
          :popper-append-to-body="false"
          :placeholder="item.options?.placeholder || '请选择'"
          :multiple="item?.multiple"
          :collapse-tags="item?.multiple"
          :collapse-tags-tooltip="item?.multiple"
          v-bind="item.itemProps"
          filterable
          clearable
        >
          <el-option
            label="全选"
            value="all"
            v-if="
              item?.multiple &&
              optionsDataAll[
                item?.originOption || item.originField || item.field
              ]?.length >= 1
            "
            @click.native="selectAll(item)"
          ></el-option>
          <el-option
            v-for="s in optionsDataAll[
              item?.originOption || item.originField || item.field
            ]"
            :key="s[item?.options?.valueKey || 'value']"
            :label="s[item.options?.labelKey || 'label']"
            :value="s[item?.options?.valueKey || 'value']"
          />
        </el-select>
      </template>
      <template v-else-if="item.type == 'dateTimeRange'">
        <div :style="item.style" v-if="getShow(item)">
          <el-date-picker
            v-model="formData[item.field]['value']"
            :style="item.style"
            type="datetimerange"
            :format="item.format || 'YYYY-MM-DD HH:mm:ss'"
            :valueFormat="item.format || 'YYYY-MM-DD HH:mm:ss'"
            :shortcuts="item.options?.shortcuts"
            :placeholder="item.options?.placeholder"
            :default-time="[
              new Date(2000, 1, 1, 0, 0, 0),
              new Date(2000, 2, 1, 23, 59, 59),
            ]"
            v-bind="item.itemProps"
          />
        </div>
      </template>
      <template v-else>
        <slot
          v-if="getShow(item)"
          :name="item.slot"
          :value="formData[item.field]"
          :input="updateSlotValue(item.field)"
        >
        </slot>
      </template>
    </template>
  </template>
</template>
<script setup>
import FormCombined from "@/components/Form/FormCombined";
import { allopts } from "@/api/public.js";
const props = defineProps({
  fieldList: { type: Array, default: () => [] },
  formData: { type: Object, default: () => ({}) },
  formOption: { type: Object, default: () => ({}) }, //options
});
const { fieldList, formOption } = toRefs(props);

const options = ref({});
const optionsData = ref({});
const getList = async (params) => {
  const res = await allopts(params);
  if (res.code === 200) {
    optionsData.value = res.data;
  }
};
/**
 * originOption:默认字典名称
 * originField:请求字典名称
 * field:字段名称
 */
watch(
  () => fieldList.value,
  (val) => {
    if (val?.length) {
      let arr = [];
      let data = {};
      val.map((item) => item?.originField);
      val.forEach((item) => {
        if (item?.options?.data) {
          data[item.field] = item?.options?.data;
        }
        if (item?.originField) {
          arr.push(item.originField);
        }
      });
      options.value = data;
      if (!arr?.length) return;
      getList({ params: arr });
    }
  },
  {
    immediate: true,
  }
);

const optionsDataAll = computed(() => {
  return Object.assign({}, optionsData.value, options.value, formOption.value);
});
const updateSlotValue = (field) => (e) => {
  props.formData[field] = e;
};

const handleCombined = (item, e) => {
  const { key, value } = e || {};
  if (item.select) {
    item.select.forEach((n) => {
      props.formData[n.value] = "";
    });
    if (!key) return;
    props.formData[key] = value;
    props.formData[item.field] = { key, value };
  } else {
    props.formData[item.field] = value
      ? JSON.parse(JSON.stringify(value))
      : value;
  }
};
const selectAll = (val) => {
  let data =
    optionsDataAll.value[val?.originOption || val.originField || val.field];
  if (props.formData[val.field]?.length < data?.length) {
    props.formData[val.field] = [];
    data?.map((item) => {
      if (item?.disabled) return;
      props.formData[val.field].push(
        item[val.valueKey || val.options?.valueKey || "value"]
      );
    });
    props.formData[val.field] = props.formData[val.field]?.filter(
      (item) => item != "all"
    );
  } else {
    // 取消全选
    props.formData[val.field] = [];
  }
};

const getShow = (row) => {
  const { show = () => true } = row;
  return show ? show?.({ row, model: props.formData }) : true;
};
</script>
